<template>
	<div id="Notice">
		<div class="title">
			<p>我的消息</p>
		</div>

		<div class="showNotice">
			<div v-for="n in notice" :key="n.id" class="notice-div">
				<div class="flex1">
					<div class="notice-title">
						<span class="title">{{n.title}} </span>
						<span class="author">{{n.m_name}}</span>
						<span class="time">{{n.time | time}}</span>
						
					</div>
					<div class="notice-content">{{n.content}}</div>
				</div>
				<div class="flex2">
					<el-button @click="deleteNotice(n.id)" class="deletebutton" type="warning">删除</el-button>
				</div>
			</div>
			<div class="nodata notice-div" v-if="notice.length == 0">
				<img :src="pic" style="margin: 0 auto;"/>
			</div>
		</div>
		<div class="table-footer">

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				notice: '',
				time: '',
				username: '',
				pic:require('../../assets/nodata.png')
			}
		},
		filters: {
			time: function(val) {
				let t = new Date(val);
				let time = `${t.getFullYear()}年${t.getMonth()+1}月${t.getDate()}日 ${t.getHours()}:${t.getMinutes()}`
				return time;
			}
		},
		created() {
			this.username = this.$store.state.user[0].username;
			this.getUserNotice();
		},
		methods: {
			getUserNotice() {
				this.$axios.get('/api/notice/queryUserNotice',{params:{username:this.username}})
					.then(data => {
						if (data.status == 200) {
							this.notice = data.data;
							this.notice.reverse();

						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			deleteNotice(id) {
				let flag = confirm('是否删除该消息');
				if(flag == false){
					return;
				}
				this.$axios.get('/api/notice/deleteNotice',{params:{id:id}})
				.then(data=>{
					if(data.data == 'ok'){
						this.getUserNotice();
					}
				})
				.catch(err=>{
						console.log(err);
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	#Notice {

		height: 100%;
		width: 100%;
		border: 1px solid #E0ECFF;
		position: relative;
		top: 2px;
		background: rgba(250, 250, 255, 0.5);
		overflow: auto;
		

		&>.title {
			border: 1px solid #E0ECFF;
			overflow: hidden;
			background-color: #fff;
			margin:10px; 
			height: 42px;
			text-align: left;
			line-height: 42px;
			padding: 0 16px;
			border-radius: 4px;
			box-shadow: 0 2px 4px 0 rgba(121, 146, 185, .54);
		}
		.showNotice {
			margin: 10px;
			
			.notice-div {
				border: 1px solid #E0ECFF;
				overflow: hidden;
				background-color: #fff;
				margin-top:10px; 
				padding: 24px 16px;
				text-align: left;
				border-radius: 4px;
				box-shadow: 0 2px 4px 0 rgba(121, 146, 185, .54);
				
				display: flex;
				display: -webkit-flex;

				.flex1 {
					flex: 10;
				}

				.flex2 {
					flex: 1;
				}

				.notice-title {

					.title {
						color: #333;
						font-weight: 700;
					}

					.time {
						color: #999;
						font-size: 12px;
						line-height: 22px;
						margin: 0 10px;
					}
				}

				.notice-content {
					word-break: break-all;
					
					padding-left: 10px;
					padding-top:10px; 
					font-size: 12px;
					margin-right: 10px;
				}

			}



		}
	}
</style>
